import { Component, Host, h, Listen, ComponentInterface } from '@stencil/core';
import { contextMenu } from '../../controllers';
import { ContextMenuItem } from '../../interface';

/**
 * 主组件
 *
 * @export
 * @class QxMain
 */
@Component({
  tag: 'qx-main',
  styleUrl: 'qx-main.scss',
})
export class QxMain implements ComponentInterface {
  @Listen('contextmenu')
  onContextMenu(e: MouseEvent): void {
    contextMenu.open(e, this.menus, { subOpenType: 'click' }).click((data: ContextMenuItem) => {
      console.log(data);
    });
  }

  menus: ContextMenuItem[] = [
    {
      text: '返回(B)',
      tooltip: '无需返回',
      textRight: 'CTRL + B',
      icon: 'assets/img/left.png',
    },
    {
      text: '前进(F)',
      tooltip: '无需前进',
      disable: true,
      icon: 'assets/svg/chat.svg',
    },
    {
      text: '对齐方式',
      subMode: 'embed-icon',
      children: [
        {
          tooltip: '上下居中',
          icon: 'assets/svg/commute.svg',
        },
        {
          tooltip: '上下居中2',
          icon: 'assets/svg/commute.svg',
        },
        {
          tooltip: '上下居中3',
          icon: 'assets/svg/commute.svg',
        },
        {
          tooltip: '上下居中4',
          icon: 'assets/svg/commute.svg',
        },
      ],
    },
    {
      text: '重新加载(R)',
      icon: 'assets/svg/toll.svg',
    },
    {
      type: 'separator',
    },
    {
      text: '另存为(A)',
      icon: 'assets/svg/bug_report.svg',
    },
    {
      text: '打印(P)',
      icon: 'assets/svg/commute.svg',
    },
    {
      text: '投射(C)',
      icon: 'assets/svg/copyright.svg',
    },
    {
      type: 'separator',
    },
    {
      text: '使用网页翻译(T)',
      children: [
        {
          text: '中文',
        },
        {
          text: '使用网页翻译(T)',
          children: [
            {
              text: '返回(B)',
              textRight: 'CTRL + B',
            },
            {
              text: '前进(F)',
              disable: true,
            },
            {
              text: '重新加载(R)',
            },
            {
              type: 'separator',
            },
            {
              text: '另存为(A)',
            },
            {
              text: '打印(P)',
            },
            {
              text: '投射(C)',
            },
            {
              type: 'separator',
            },
            {
              text: '使用网页翻译(T)',
              children: [
                {
                  text: '使用网页翻译(T)',
                  children: [
                    {
                      text: '中文',
                    },
                    {
                      text: '日文',
                    },
                  ],
                },
                {
                  text: '德文',
                },
                {
                  text: '意大利',
                },
              ],
            },
            {
              type: 'separator',
            },
            {
              text: '关闭',
            },
          ],
        },
        {
          text: '德文',
        },
      ],
    },
    {
      type: 'separator',
    },
    {
      text: '关闭',
    },
  ];

  render() {
    return <Host class='qx-main'></Host>;
  }
}
